<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // 执行上下文
        class ExecutionContext {
            constructor(global) {
                this.name = name;
            }
        }

        // 定义执行上下文栈
        class ExecutionContextStack {

            constructor() {
                this.stack = [];
            }
            // 推入执行上下文
            push(context) {
                this.stack.push(context);
            }
            // 弹出执行上下文
            pop() {

                return this.stack.pop();
            }
            // 获取当前栈顶执行上下文
            peek() {
                return this.stack[this.stack.length - 1];
            }
            // 获取执行上下文栈的大小
            size() {
                return this.stack.length;
            }
        }

        // case 1
        var scope = "global scope";
        function checkscope() {
            var scope = "local scope";
            function f() {
                return scope;
            }
            return f();
        }
        checkscope();

        // 创建全局上下文栈实例
        const ecs = new ExecutionContextStack('Global');

        // 模拟执行上下文的创建和销毁过程
        ecs.push(new ExecutionContext('Global')) // 创建全局执行上下文推入栈中

        function checkScope() {
            ecs.push(new ExecutionContext('checkScope')); //创建 checkScope 函数执行上下文并推入栈中
            var scope = "local scope"
            function f() {
                ecs.push(new ExecutionContext('f')); //创建f函数执行上下文并推入栈中
                console.log('current context:', ecs.peek().name); // 打印当前执行上下文的名称
                ecs.pop(); // 弹出栈顶执行上下文
                return scope;
            }
            const result = f();
            ecs.pop(); // 弹出栈顶执行上下文
            return result;
        }

        const result = checkScope();
        console.log("Return value：", result);
        console.log("Recs：", ecs);
        ecs.pop()


    </script>

</body>

</html>